<template>
	<div id="app" class="container">
		<h1>Text Translator</h1>

		<!-- 文本输入区 -->
		<textarea v-model="inputText" placeholder="Enter text to translate" class="input-text"></textarea>

		<!-- 语言选择 -->
		<div class="language-select">
			<label for="fromLanguage">From:</label>
			<select v-model="fromLanguage" id="fromLanguage">
				<option value="zh">Chinese</option>
				<option value="en">English</option>
			</select>

			<label for="toLanguage">To:</label>
			<select v-model="toLanguage" id="toLanguage">
				<option value="zh">Chinese</option>
				<option value="en">English</option>
			</select>
		</div>

		<!-- 翻译按钮 -->
		<button @click="onTranslate" :disabled="isLoading">
			{{ isLoading ? 'Translating...' : 'Translate' }}
		</button>

		<!-- 显示翻译结果 -->
		<div v-if="translatedText" class="result">
			<h2>Translation Result:</h2>
			<p>{{ translatedText }}</p>
		</div>

		<!-- 显示错误信息 -->
		<div v-if="errorMessage" class="error">
			<p>{{ errorMessage }}</p>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			inputText: '', // 用户输入的文本
			fromLanguage: 'zh', // 默认源语言
			toLanguage: 'en', // 默认目标语言
			translatedText: '', // 翻译结果
			isLoading: false, // 加载状态
			errorMessage: '' // 错误消息
		};
	},
	methods: {
		onTranslate() {
			// 确保用户输入了文本
			if (!this.inputText.trim()) {
				this.errorMessage = '请输入要翻译的文本！';
				return;
			}

			this.isLoading = true;
			this.errorMessage = ''; // 清空错误信息

			uni.request({
				url: 'http://localhost:80/system/translate/getString', // API 地址
				method: 'POST',
				header: {
					'Content-Type': 'application/json'
				},
				data: {
					text: this.inputText,
					from: this.fromLanguage,
					to: this.toLanguage
				},
				success: (res) => {
					if (res.statusCode === 200 && res.data) {
						this.translatedText = res.data; // 假设后端返回的是翻译后的文本
					} else {
						this.errorMessage = '翻译失败，请稍后重试！';
					}
				},
				fail: (err) => {
					this.errorMessage = '请求失败：' + (err.errMsg || '请检查网络连接');
				},
				complete: () => {
					this.isLoading = false;
				}
			});
		}
	}
};
</script>

<style scoped>
.container {
	padding: 30px;
	max-width: 700px;
	margin: 0 auto;
	background-color: #e3f2fd;
	border-radius: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

h1 {
	text-align: center;
	font-size: 36px;
	color: #1e88e5;
	font-family: 'Comic Sans MS', sans-serif;
	margin-bottom: 20px;
}

.input-text {
	width: 100%;
	height: 140px;
	margin-bottom: 20px;
	padding: 15px;
	font-size: 18px;
	border-radius: 10px;
	border: 2px solid #90caf9;
	background-color: #ffffff;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.language-select {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.language-select label {
	font-size: 18px;
	color: #1e88e5;
	font-weight: bold;
}

.language-select select {
	padding: 10px;
	border-radius: 10px;
	border: 2px solid #90caf9;
	background-color: #ffffff;
	font-size: 16px;
	color: #1e88e5;
}

button {
	width: 100%;
	padding: 15px;
	font-size: 20px;
	background-color: #42a5f5;
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:disabled {
	background-color: #b0bec5;
	cursor: not-allowed;
}

button:hover:not(:disabled) {
	background-color: #1e88e5;
}

.result {
	margin-top: 20px;
	background-color: #bbdefb;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result h2 {
	margin-bottom: 10px;
	font-size: 24px;
	color: #1e88e5;
}

.result p {
	font-size: 18px;
	line-height: 1.6;
	color: #333;
}

.error {
	color: #e53935;
	margin-top: 10px;
	text-align: center;
	font-size: 16px;
}
</style>